<br /><span class="breadcrumb" style="margin-left: 25px">List of Patients</span>
<br /><br />
<table id="patients" style></table><div id="patientsPager"></div>

<script type="text/javascript">
	$('#patients').jqGrid({
		containerId: 'pGrid',
		url: <cfoutput>'#URLFor(controller="Patient", action="patients")#?format=json'</cfoutput>,
		datatype: 'json',
		width: '85%',
		height: 'auto', 
		caption: 'Patient List',
		colNames:['First Name', 'Last Name', 'Start Date', 'End Date'],
		colModel: [
			{	name: 'FIRSTNAME', label: 'FIRSTNAME', align: 'center', sorttype: 'text', sortable: true	, editable: true	},
			{	name: 'LASTNAME', label: 'firstName', align: 'center', sorttype: 'text', sortable: true		},
			{ 	name: 'STARTDATE', label: 'startDate', align: 'right', sorttype: 'date', sortable: true, classes: "ui-jqgrid-date"	},
			{ 	name: 'ENDDATE', label: 'endDate', align: 'right', sorttype: 'date', sortable: true, classes: "endDate ui-jqgrid-date"	}
		], 
		 jsonReader: {
			root: "ROWS",		//our data
			page: "PAGE",		//current page
			total: "TOTAL", 		//total pages
			records: "'RECORDS'", //total records
			cell: "CELL" 			//not used
		},

		pager: '#patientsPager',
		sortname: 'FIRSTNAME',
		rownumbers: true,
		rowNum: 16,
		altRows: true,
		hidegrid: false,
		
		gridComplete:
			 function customAlt() {
				$('#patients tr:nth-child(even)').css({
							'backgroundColor': '#E1E5E9',
							'filter': 'expression("progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#E1E5E9\',endColorstr=\'#FFFFFF\')")',
							'-ms-filter': 'progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#E1E5E9\', endColorstr=\'#FFFFFF\')',
							'background': '-webkit-gradient(linear, left top, left bottom, from(#E1E5E9), to(#FFFFFF))',
							'background': '-o-linear-gradient(0% 100% 90deg, #E1E5E9, #FFFFFF)',
							'color': '#000000'
				});

				$('#patients tr:nth-child(odd)').css({	'backgroundColor': '#FFFFFF'  });																		// Styles Alternate Rows
				$('td.jqgrid-rownum').removeClass('ui-state-default').css({ 'font-weight': 'bold' });													// Styles Grid Row Numbers
				$('#patientsPager').removeClass().addClass('ui-jqgrid-pager');																					// Styles Pager
				$('.ui-pg-input').css({ 'borderRadius':' 0px','textAlign': 'center', 'height': '1em', 'marginTop': '.5px'	});					// Styles Pager Input
				$('.ui-grid-ico-sort').css({ 'backgroundImage': 'url(../../images/Absolution/ui-icons_222222_256x240.png)' });	// Styles Sort Icons
				$('.ui-pg-table td').css('backgroundColor', 'transparent');																								// Styles Pager Buttons/Icons
	//			$('.ui-separator:first').remove();
			},
		onSelectRow: function(id) {
			location = <cfoutput>'#URLFor(controller="Patient", action="Profile")#/' + id</cfoutput>;
		}
	});
/*
	$("#patients").jqGrid('navGrid', '#patientsPager', {	
		add: false,
		addtext: 'New Patient',
		del: false,
		edit: false,
		refresh: false,
		search: false,
		seperator: false

	});

	$("#patients").jqGrid('inlineNav', '#patientsPager', {
		addtext: 'New Patient',
		edit: false,
		save: false,
		cancel: false
	});*/
</script>